<template>
	<div id="product-item">
		<ul v-if="productData[backId]">
			<li v-for="i in productData[backId].Data">
			<router-link :to="{path:'/productList',query:{id:i.good_id}}">
				<div class="catelist-left">
					<img :src="i.img_url" alt="正在加载">
				</div>
				<div class="catelist-right">
					<p class="catelist-name">
						{{i.good_name}}
					</p>
					<p class="catelist-price">
						￥{{i.sell_price}}
					</p>
				</div>
			</router-link>
			</li>
		</ul>
	</div>
</template>


<style>
	#product-item{
		width: 100%;
		position: absolute;
		top: 1.066667rem;
		bottom: 0;
		overflow: auto;
		background: #fff;
	}
	#product-item li{
		width: 100%;
		border-bottom: 2px solid #f0f0f0;
	}
	#product-item li a{
		display: block;
		width: 100%;
		height: 100%;
		display: flex;
	}
	.catelist-left{
		width: 33.33%;
	}
	.catelist-left img{
		width: 2.666667rem;
		height: 2.666667rem;
		margin: 5% 10%;
	}
	.catelist-right{
		width: 66.66%;
		padding: 0.133333rem 0.266667rem 0 0;
	}
	.catelist-name{
		line-height: 0.533333rem;
	    height: 1.066667rem;
	    font-size: 0.4rem;
	    overflow: hidden;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    word-break: break-all;
	    margin-bottom: 0.133333rem;
	}
	.catelist-price{
		font-size: 0.426667rem;
		color: #ff3d00;
	}
</style>


<script>
	export default {
		data(){
			return {
				productData: []
			}
		},
		methods: {
			request(){
				this.$http.get('/static/json/category-items.json')
				.then(function(res){
					this.productData = res.body;
				})
			}
		},
		computed: {
			backId(){
				// return this.$store.state.catelistId;
				return this.$route.query.id;
			}
		},
		mounted(){
			this.request();
		}
	}
</script>